html_content = '''<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>华北电力大学控制与计算机工程学院</title>  
    <style>  
        * { margin: 0; padding: 0; box-sizing: border-box; }  
        body { font-family: 'Microsoft YaHei', sans-serif; line-height: 1.6; color: #333; }  
        header { background: #005BBB; color: white; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }  
        header img { height: 50px; }  
        nav ul { display: flex; list-style: none; gap: 2rem; }  
        nav a { color: white; text-decoration: none; font-weight: 500; }  
        nav a:hover { text-decoration: underline; }  
        form { display: flex; gap: 0.5rem; }  
        input[type="text"] { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }  
        button { padding: 0.5rem 1rem; background: #005BBB; color: white; border: none; border-radius: 4px; cursor: pointer; }  
        button:hover { background: #003366; }  
        main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }  
        .banner { display: flex; gap: 1rem; overflow-x: auto; padding: 1rem 0; scroll-snap-type: x mandatory; }  
        .banner img { width: 100%; max-width: 900px; height: auto; border-radius: 8px; scroll-snap-align: start; }  
        .news-section { margin-top: 2rem; }  
        .news-container { display: flex; gap: 2rem; flex-wrap: wrap; }  
        .news-card { flex: 1; min-width: 300px; background: #f8f9fa; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }  
        .news-card img { width: 100%; height: auto; margin-bottom: 1rem; border-radius: 4px; }  
        .news-card h3 { margin-bottom: 0.5rem; color: #005BBB; }  
        .news-card a { color: #005BBB; text-decoration: none; }  
        .news-card a:hover { text-decoration: underline; }  
        .notice-section { margin-top: 2rem; }  
        .notice-list { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }  
        .notice-list ul { list-style: none; }  
        .notice-list li { padding: 0.5rem 0; border-bottom: 1px solid #eee; }  
        .notice-list li:last-child { border-bottom: none; }  
        .notice-list a { color: #333; text-decoration: none; }  
        .notice-list a:hover { color: #005BBB; }  
        footer { background: #333; color: white; text-align: center; padding: 2rem; margin-top: 2rem; }  
        @media (max-width: 768px) { header { flex-direction: column; gap: 1rem; } nav ul { flex-wrap: wrap; justify-content: center; } }  
    </style>  
</head>  
<body>  
    <header>  
        <img src="https://via.placeholder.com/200x50?text=学院Logo" alt="学院Logo">  
        <nav>  
            <ul>  
                <li><a href="#about">学院概况</a></li>  
                <li><a href="#teachers">师资队伍</a></li>  
                <li><a href="#education">教育教学</a></li>  
                <li><a href="#research">科学研究</a></li>  
            </ul>  
        </nav>  
        <form action="/search" method="get">  
            <input type="text" placeholder="搜索...">  
            <button type="submit">搜索</button>  
        </form>  
    </header>  
  
    <main>  
        <section class="banner">  
            <img src="https://via.placeholder.com/900x400/005BBB/fff?text=科研成果展示" alt="科研成果展示">  
            <img src="https://via.placeholder.com/900x400/2E86C1/fff?text=校园活动" alt="校园活动">  
            <img src="https://via.placeholder.com/900x400/3498DB/fff?text=学术报告会" alt="学术报告会">  
        </section>  
  
        <section class="news-section">  
            <h2>新闻动态</h2>  
            <div class="news-container">  
                <article class="news-card">  
                    <img src="https://via.placeholder.com/300x200/ECF0F1/333?text=新闻图片" alt="新闻图片">  
                    <h3>学院召开人才培养方案论证会</h3>  
                    <p>2025年9月23日，控制与计算机工程学院召开两地人才培养方案论证会，就本科及研究生人才培养模式进行深入探讨。</p>  
                    <a href="#news-detail">阅读更多</a>  
                </article>  
                <article class="news-card">  
                    <img src="https://via.placeholder.com/300x200/ECF0F1/333?text=新闻图片" alt="新闻图片">  
                    <h3>学院"铁甲钢拳队"亮相服贸会</h3>  
                    <p>2025年9月19日，学院机器人创新团队"铁甲钢拳队"在服贸会上展示最新研发的搏击机器人，吸引众多观众驻足。</p>  
                    <a href="#news-detail">阅读更多</a>  
                </article>  
                <article class="news-card">  
                    <img src="https://via.placeholder.com/300x200/ECF0F1/333?text=新闻图片" alt="新闻图片">  
                    <h3>学院举办2025级新生家长见面会</h3>  
                    <p>2025年9月15日，学院召开2025级本科新生家长见面会，介绍学院教学特色及学生培养方案。</p>  
                    <a href="#news-detail">阅读更多</a>  
                </article>  
            </div>  
        </section>  
  
        <aside class="notice-section">  
            <h2>通知通告</h2>  
            <div class="notice-list">  
                <ul>  
                    <li><a href="#notice1">2026年接收推荐免试研究生拟复试名单</a></li>  
                    <li><a href="#notice2">关于修订研究生综合测评文件的通知</a></li>  
                    <li><a href="#notice3">2025年国庆节放假安排及安全提示</a></li>  
                </ul>  
            </div>  
        </aside>  
    </main>  
  
    <footer>  
        <p>地址：北京市昌平区北农路2号 | 电话：010-61772568</p>  
        <p>© 2025 华北电力大学 控制与计算机工程学院</p>  
    </footer>  
</body>  
</html>'''  
  
with open('rendered_homepage.html', 'w', encoding='utf-8') as f:  
    f.write(html_content)  
  
print("渲染后的HTML文件已生成：rendered_homepage.html")```